﻿@namespace AntDesign.Pro.Template.Pages.Account.Center
@page "/account/center"

<GridContent>
    <Row Gutter="24">
        <AntDesign.Col Lg="7" Md="24">
            <Card Style="margin-bottom: 24px;">
                <div class="avatarHolder">
                    <img alt="" src="@_currentUser.Avatar" />
                    <div className="name">@_currentUser.Name</div>
                    <div>@_currentUser.Signature</div>
                </div>

                <div class="detail">
                    <p>
                        <Icon Type="contacts" Theme="@IconThemeType.Outline" Style="margin-right:8px;" />
                        @_currentUser.Title
                    </p>
                    <p>
                        <Icon Type="cluster" Theme="@IconThemeType.Outline" Style="margin-right:8px;" />
                        @_currentUser.Group
                    </p>
                    <p>
                        <Icon Type="home" Theme="@IconThemeType.Outline" Style="margin-right:8px;" />
                        <!--todo: add userinfo-->
                        @_currentUser.Geographic.Province.Label
                        @_currentUser.Geographic.City.Label
                    </p>
                </div>

                <Divider Dashed />

                <div class="tags">
                    <div class="tagsTitle">Tags</div>
                    @foreach (var tag in _currentUser.Tags)
                    {
                        <Tag>@tag.Label</Tag>
                    }

                    @if (_inputVisible)
                    {
                        <AntDesign.Input Type="InputType.Text" Size="InputSize.Small" Style="width: 78px"
                            @bind-Value="InputValue" OnBlur="HandleInputConfirm" />
                    }
                    else
                    {
                        <Tag OnClick="ShowInput" Style="border-style: dashed">
                            <Icon Type="plus" Theme="@IconThemeType.Outline" />
                        </Tag>
                    }
                </div>

                <Divider Dashed Style="margin-top: 16px;" />

                <div class="team">
                    <div class="teamTitle">Team</div>
                    <!--todo: add notice-->
                </div>
            </Card>
        </AntDesign.Col>
        <AntDesign.Col Lg="17" Md="24">
            <Card Class="tabsCard">
                <Tabs DefaultActiveKey="1">
                    <TabPane Key="1">
                        <TabTemplate>Articles (@_fakeList.Count)</TabTemplate>
                        <ChildContent>
                            <Articles List="_fakeList" />
                        </ChildContent>
                    </TabPane>
                    <TabPane Key="2">
                        <TabTemplate>Applications (@_fakeList.Count)</TabTemplate>
                        <ChildContent>
                            <Applications List="_fakeList" />
                        </ChildContent>
                    </TabPane>
                    <TabPane Key="3">
                        <TabTemplate>Projects (@_fakeList.Count)</TabTemplate>
                        <ChildContent>
                            <Projects List="_fakeList" />
                        </ChildContent>
                    </TabPane>
                </Tabs>
            </Card>
        </AntDesign.Col>
    </Row>
</GridContent>
